<template>
  <div
    v-loading="virtualSubnetLoading"
    id="virtualSubnet"
    class="main-div main-div-nopadding"
  >
    <el-container>
      <el-aside
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
        class="background-color-white"
      >
        <div class="aside-header-div">
          <!--虚拟子网-->
          {{ $t('message.virtualSubnet.aside.header') }}
          <div style="float: right">
            <el-button
              v-if="$store.state.is_staff"
              @click="handleVirtualSubnetCreate"
              style="padding: 0"
              type="text"
            >
              <i
                class="el-icon-plus"
                style="font-weight: bold;color: #fff;padding-right: 45px;line-height: 1em;"
              />
            </el-button>
          </div>
        </div>
        <div
          class="aside-tree-div"
        >
          <el-table
            @row-click="handleVirtualSubnetRowClick"
            :data="virtualSubnetTable"
            highlight-current-row
            row-class-name="my-table-cell-pointer"
            :show-header="false"
          >
            <el-table-column
              type="index"
              width="50px"
            />
            <el-table-column prop="name">
              <template slot-scope="scope">
                <span v-show="!scope.row.create">
                  {{ scope.row.name }}
                </span>
                <el-input
                  @click.stop.native
                  v-show="scope.row.create"
                  v-model="scope.row.name"
                />
              </template>
            </el-table-column>
            <el-table-column
              v-if="$store.state.is_staff"
              width="100px"
            >
              <template slot-scope="scope">
                <el-button
                  v-show="!scope.row.create"
                  style="padding: 0 0 0 5px"
                  @click.stop="handleVirtualSubnetDelete(scope.$index, scope.row)"
                  type="text"
                >
                  <!--删除-->
                  <img src="@/assets/common/delete.png">
                </el-button>
                <el-button
                  v-show="scope.row.create"
                  @click.stop="handleVirtualSubnetCreateSubmit(scope.$index, scope.row)"
                  type="primary"
                  size="small"
                >
                  <!--确定-->
                  {{ $t('message.common.button.confirm') }}
                </el-button>
                <el-button
                  v-show="scope.row.create"
                  @click.stop="handleVirtualSubnetCreateCancel(scope.$index, scope.row)"
                  size="small"
                >
                  <!--取消-->
                  {{ $t('message.common.button.cancel') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-aside>
      <el-main class="el-main-padding my-test">
        <div class="my-breadcrumb-div">
          <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
          <el-breadcrumb
            class="my-breadcrumb-padding"
            separator="/"
          >
            <el-breadcrumb-item>
              <!--配置-->
              {{ $t('message.virtualSubnet.breadcrumb.crumb1') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <!--虚拟子网-->
              {{ $t('message.virtualSubnet.breadcrumb.crumb2') }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!--提示信息-->
        <div style="margin: 10px 0;">
          <el-alert
            type="info"
            effect="dark"
          >
            <span slot="title">
              <!--注：虚拟子网内资源不可供外部用户使用，子网内终端不可与外部通信-->
              {{ $t('message.virtualSubnet.promptText') }}
            </span>
          </el-alert>
        </div>
        <!--成员-->
        <el-row>
          <el-col :span="24">
            <el-card
              class="margin-bottom-row"
              style="text-align: left"
            >
              <div
                style="margin-bottom: 10px"
                class="card-header-div"
              >
                <!--成员-->
                {{ $t('message.virtualSubnet.user.header') }}
                <el-button
                  v-if="$store.state.is_staff"
                  @click="handleVirtualSubnetMemberCreate"
                  style="padding: 0 0 0 5px"
                  type="text"
                >
                  <i
                    class="el-icon-plus"
                    style="font-weight: bold"
                  />
                </el-button>
                <!--全部清空-->
                <el-button
                  v-show="virtual_subnet"
                  v-if="$store.state.is_staff"
                  @click="handleVirtualSubnetMemberClear"
                  style="padding: 0 0 0 5px;float: right"
                  type="text"
                >
                  <!--全部清空-->
                  {{ $t('message.virtualSubnet.user.clearButton') }}
                </el-button>
              </div>
              <!--成员表格-->
              <div>
                <el-table
                  height="300px"
                  header-cell-class-name="my-table-header-cell my-table-header-cell-center"
                  cell-class-name="my-table-cell my-table-cell-center"
                  :data="member.table.data"
                >
                  <el-table-column type="index" />
                  <!--终端编号-->
                  <el-table-column
                    :label="$t('message.virtualSubnet.user.table.header.col1')"
                    prop="device"
                  />
                  <!--终端号码-->
                  <el-table-column
                    :label="$t('message.virtualSubnet.user.table.header.col2')"
                    prop="number"
                  />
                  <!--地球站名称-->
                  <el-table-column
                    :label="$t('message.virtualSubnet.user.table.header.col3')"
                    prop="station_name"
                  />
                  <!--操作-->
                  <el-table-column
                    v-if="$store.state.is_staff"
                    :label="$t('message.common.label.operate')"
                  >
                    <template slot-scope="scope">
                      <el-button
                        style="padding: 0 0 0 5px"
                        @click="handleVirtualSubnetMemberDelete(scope.row, scope.$index)"
                        type="text"
                      >
                        <img src="@/assets/common/delete.png">
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!--频率段-->
        <el-row>
          <el-col :span="24">
            <el-card style="text-align: left">
              <div
                style="margin-bottom: 10px"
                class="card-header-div"
              >
                <!--频率段-->
                {{ $t('message.virtualSubnet.freqSegment.header') }}
                <el-button
                  v-if="$store.state.is_staff"
                  style="padding: 0 0 0 5px"
                  type="text"
                  @click="handleVirtualSubnetFreqSegmentCreate"
                >
                  <i
                    class="el-icon-plus"
                    style="font-weight: bold"
                  />
                </el-button>
              </div>
              <el-table
                height="350px"
                header-cell-class-name="my-table-header-cell my-table-header-cell-center"
                cell-class-name="my-table-cell my-table-cell-center"
                :data="freqSegment.table.data"
              >
                <el-table-column type="index" />
                <!--卫星-->
                <el-table-column
                  :label="$t('message.virtualSubnet.freqSegment.table.header.col1')"
                  prop="satellite_name"
                />
                <!--上行波束-->
                <el-table-column
                  :label="$t('message.virtualSubnet.freqSegment.table.header.col2')"
                  prop="up_beam_name"
                />
                <!--下行波束-->
                <el-table-column
                  :label="$t('message.virtualSubnet.freqSegment.table.header.col3')"
                  prop="down_beam_name"
                />
                <!--转发器-->
                <el-table-column
                  :label="$t('message.virtualSubnet.freqSegment.table.header.col4')"
                  prop="transponder_name"
                />
                <!--下行起始频点-->
                <el-table-column
                  :label="$t('message.virtualSubnet.freqSegment.table.header.col5')"
                  prop="down_freq_begin_format"
                />
                <!--下行终止频点-->
                <el-table-column
                  :label="$t('message.virtualSubnet.freqSegment.table.header.col6')"
                  prop="down_freq_end_format"
                />
                <!--操作-->
                <el-table-column
                  v-if="$store.state.is_staff"
                  :label="$t('message.common.label.operate')"
                >
                  <template slot-scope="scope">
                    <!--<el-button-->
                    <!--  style="padding: 0"-->
                    <!--  @click="handleVirtualSubnetMemberModify(scope.row, scope.$index)"-->
                    <!--  type="text"-->
                    <!--&gt;-->
                    <!--  <img src="@/assets/common/edit.png">-->
                    <!--</el-button>-->
                    <el-button
                      style="padding: 0 0 0 5px"
                      @click="handleVirtualSubnetFreqSegmentDelete(scope.row, scope.$index)"
                      type="text"
                    >
                      <img src="@/assets/common/delete.png">
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <!--dialog-->
    <div>
      <!--用户成员-->
      <el-dialog
        v-loading="member.form.loading"
        :title="$t('message.virtualSubnet.dialog.user.title')"
        @open="getCuList"
        @closed="handleMemberDialogClosed"
        width="800px"
        :visible.sync="member.visible"
      >
        <div
          class="member-dialog-div-content"
          style="height: 600px"
        >
          <div class="member-left">
            <div class="member-left-header">
              <!--已选终端：-->
              {{ $t('message.virtualSubnet.dialog.user.left.header') }}
            </div>
            <div class="member-left-list">
              <div
                v-for="item in member.form.cus.selectionCus"
                :key="item.id"
              >
                {{ item.device }}
              </div>
            </div>
          </div>
          <!--勾选table-->
          <div class="member-right">
            <div class="member-dialog-search-div">
              <!--<font-awesome-icon-->
              <!--  style="margin-right: 20px"-->
              <!--  icon="search"-->
              <!--  size="lg"-->
              <!--/>-->
              <el-input
                style="width: 250px;margin-right: 20px"
                size="small"
                v-model="cuSearchConfig.info"
              />
              <el-button
                @click="handleRemoteTableSearch"
                type="primary"
                size="mini"
              >
                <!--查询按钮-->
                {{ $t('message.home.remoteDeviceTable.search.searchButton') }}
                <el-popover
                  placement="bottom-start"
                  width="200"
                  trigger="hover"
                  :content="$t('message.home.remoteDeviceTable.search.searchPrompt')"
                >
                  <font-awesome-icon
                    slot="reference"
                    style="vertical-align: top"
                    :icon="['far', 'question-circle']"
                  />
                </el-popover>
              </el-button>
            </div>
            <el-table
              ref="memberCuTable"
              @select="handleMemberCuTableSelect"
              @select-all="handleMemberCuTableSelectAll"
              :data="member.form.cus.table.data"
              class="table-gutter-background"
              header-cell-class-name="my-table-header-cell"
              cell-class-name="my-table-cell"
              height="500px"
            >
              <!--表格多选-->
              <el-table-column
                type="selection"
                width="55"
              />
              <!--终端编号-->
              <el-table-column
                prop="device"
                min-width="120px"
                :label="$t('message.virtualSubnet.dialog.user.right.table.header.col1')"
              />
              <!--终端号码-->
              <el-table-column
                prop="number"
                min-width="120px"
                :label="$t('message.virtualSubnet.dialog.user.right.table.header.col2')"
              />
              <!--地球站名称-->
              <el-table-column
                prop="station_name"
                min-width="120px"
                :label="$t('message.virtualSubnet.dialog.user.right.table.header.col3')"
              />
            </el-table>
            <el-pagination
              @size-change="handleSearchCuSizeChange"
              @current-change="handleSearchCuPageChange"
              class="pagination-position"
              background
              :page-sizes="[10, 20, 50]"
              :page-size="cuSearchConfig.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="member.form.cus.table.count"
            />
          </div>
        </div>
        <div slot="footer">
          <el-button
            type="primary"
            @click="handleMemberCreateSubmit"
          >
            <!--确定-->
            {{ $t('message.common.button.confirm') }}
          </el-button>
        </div>
      </el-dialog>
      <!--频率段资源-->
      <el-dialog
        title="频率段"
        @open="handleFreqSegmentDialogOpen"
        width="900px"
        :visible.sync="freqSegment.visible"
      >
        <div
          class="member-dialog-div-content"
          style="height: 350px"
        >
          <div class="member-left">
            <!--输入关键字进行过滤-->
            <el-input
              style="margin-bottom: 15px;width: 180px"
              :placeholder="$t('message.p2p.dialog.p2p.create.filterInputPlaceholder')"
              v-model="filterText"
              size="mini"
            />
            <!--卫星资源树-->
            <el-tree
              style="height: 100%;width: 100%;padding-top: 5px;box-sizing: border-box"
              ref="satelliteTree"
              node-key="node_key"
              @node-click="handleTreeNodeClick"
              :data="freqSegment.form.tree.data"
              default-expand-all
              highlight-current
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
            >
              <span
                style="flex: 1"
                slot-scope="{ node, data }"
              >
                <!--卫星-->
                <span
                  v-if="data.node_type === 'satellite'"
                  class="custom-tree-node"
                >
                  <span>
                    <img
                      class="tree-node-img"
                      src="@/assets/config/satelliteResource/wx.png"
                    >
                    {{ data.name }}
                  </span>
                </span>
                <!--波束-->
                <span
                  v-if="data.node_type === 'beam'"
                  class="custom-tree-node"
                >
                  <span>
                    <img
                      class="tree-node-img"
                      src="@/assets/config/satelliteResource/bs.png"
                    >
                    {{ data.name }}
                  </span>
                </span>
                <!--转发器-->
                <span
                  v-if="data.node_type === 'transponder'"
                  class="custom-tree-node"
                >
                  <span>
                    <img
                      class="tree-node-img"
                      src="@/assets/config/satelliteResource/zfq.png"
                    >
                    {{ data.name }}
                  </span>
                </span>
              </span>
            </el-tree>
          </div>
          <!--table-->
          <div class="member-right">
            <el-table
              v-loading="freqSegment.form.table.loading"
              ref="freqSegmentTable"
              highlight-current-row
              @row-click="handleFreqSegmentRowClick"
              :data="$store.getters.getFreqSegmentTableData"
              class="table-gutter-background"
              header-cell-class-name="my-table-header-cell"
              cell-class-name="my-table-cell my-table-cell-pointer"
              height="350px"
            >
              <!--波束-->
              <el-table-column
                prop="down_beam_name"
                min-width="120px"
                :label="$t('message.virtualSubnet.dialog.freqSegment.right.table.header.col1')"
              />
              <!--转发器-->
              <el-table-column
                prop="transponder_name"
                min-width="120px"
                :label="$t('message.virtualSubnet.dialog.freqSegment.right.table.header.col2')"
              />
              <!--下行起始频点-->
              <el-table-column
                prop="down_freq_begin_format"
                min-width="120px"
                :label="$t('message.virtualSubnet.dialog.freqSegment.right.table.header.col3')"
              />
              <!--下行终止频点-->
              <el-table-column
                prop="down_freq_end_format"
                min-width="120px"
                :label="$t('message.virtualSubnet.dialog.freqSegment.right.table.header.col4')"
              />
            </el-table>
          </div>
        </div>
        <el-form
          ref="freqSegmentForm"
          style="margin-top: 20px"
          inline
          :model="freqSegment.form"
        >
          <el-form-item
            :label="$t('message.virtualSubnet.dialog.freqSegment.form.label1')"
            prop="kind"
          >
            <!--输入提示-->
            <el-popover
              placement="top"
              :title="$t('message.common.label.inputPrompt')"
              width="200"
              trigger="focus"
            >
              <span>{{ $service.miliFormat(freqSegment.form.down_freq_begin) }} KHz</span>
              <el-input
                slot="reference"
                :maxlength="$store.state.parameters.inputLengthLimit.freq"
                show-word-limit
                v-model.number="freqSegment.form.down_freq_begin"
              >
                <template slot="append">
                  KHz
                </template>
              </el-input>
            </el-popover>
          </el-form-item>
          <el-form-item
            :label="$t('message.virtualSubnet.dialog.freqSegment.form.label2')"
            prop="kind"
          >
            <!--输入提示-->
            <el-popover
              placement="top"
              :title="$t('message.common.label.inputPrompt')"
              width="200"
              trigger="focus"
            >
              <span>{{ $service.miliFormat(freqSegment.form.down_freq_end) }} KHz</span>
              <el-input
                slot="reference"
                :maxlength="$store.state.parameters.inputLengthLimit.freq"
                show-word-limit
                v-model.number="freqSegment.form.down_freq_end"
              >
                <template slot="append">
                  KHz
                </template>
              </el-input>
            </el-popover>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button
            type="primary"
            @click="handleFreqSegmentCreateSubmit"
          >
            <!--确定-->
            {{ $t('message.common.button.confirm') }}
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VirtualSubnet',
  watch: {
    filterText (val) {
      this.$refs.satelliteTree.filter(val)
    }
  },
  computed: {
    cuTable () {
      return [
        ...this.$store.getters.getCuOfRemote,
        ...this.$store.getters.getCuOfCenter
      ]
    }
  },
  data () {
    return {
      filterText: '',

      // cuListDialog查询属性
      cuSearchConfig: {
        loading: false,

        ordering: 'device',
        page: 1,
        pageSize: 10,

        info: ''
      },

      virtualSubnetLoading: true,

      virtualSubnetTable: [],
      // freqSegmentTable: [],

      virtual_subnet: '',

      member: {
        loading: false,
        visible: false,

        table: {
          data: []
        },

        form: {
          loading: false,
          cus: {
            selectionCus: [],

            table: {
              data: [],
              count: 0
            }
          }
        }
      },

      freqSegment: {
        loading: false,
        visible: false,

        table: {
          data: []
        },

        form: {
          loading: false,
          tree: {
            loading: false,
            data: [],
            currentNode: null
          },

          table: {
            loading: false,
            currentRow: null
          },

          freq_segment: '',
          down_freq_begin: '',
          down_freq_end: ''
        }
      }
    }
  },
  // 在离开当前页面前，清空频率表格中的数据
  beforeRouteLeave (to, from, next) {
    let self = this
    self.$store.commit(`setFreqSegmentTable`, [])
    next()
  },
  mounted () {
    let self = this
    self.getVirtualSubnetTable()
  },
  methods: {
    async getVirtualSubnetTable () {
      let self = this
      try {
        self.virtualSubnetLoading = true
        let response = await self.$store.dispatch('axios', {
          method: 'get',
          url: `/api/abs/resources/virtual_subnet/`
        })
        self.virtualSubnetTable = response.data.map(item => {
          return {
            ...item,
            create: false
          }
        })
      } finally {
        self.virtualSubnetLoading = false
      }
    },
    // 处理表格的选择事件
    handleMemberCuTableSelect (selection, row) {
      let self = this
      // 如果是添加操作
      if (selection.map(item => item.id).includes(row.id)) {
        // 判断已选择的列表里是否有重复
        if (self.member.form.cus.selectionCus.map(item => item.id).includes(row.id)) return
        self.member.form.cus.selectionCus.push(row)
      } else {
        for (let i in self.member.form.cus.selectionCus) {
          if (self.member.form.cus.selectionCus[i].id === row.id) {
            self.member.form.cus.selectionCus.splice(i, 1)
          }
        }
      }
    },
    handleMemberCuTableSelectAll (selection) {
      let self = this
      // 当用户全选时
      if (selection.length) {
        selection.forEach(select => {
          if (self.member.form.cus.selectionCus.map(item => item.id).includes(select.id)) return
          self.member.form.cus.selectionCus.push(select)
        })
      } else {
        // 当用户取消全选时
        let tableData = self.member.form.cus.table.data
        tableData.forEach(cancelSelect => {
          for (let i in self.member.form.cus.selectionCus) {
            if (self.member.form.cus.selectionCus[i].id === cancelSelect.id) {
              self.member.form.cus.selectionCus.splice(i, 1)
              break
            }
          }
          // if (self.member.form.cus.selectionCus.map(item => item.id).includes(cancelSelect.id)) {
          //
          // }
        })
      }
    },
    setMemberCuTableSelect () {
      let self = this
      self.$nextTick(() => {
        for (let select of self.member.form.cus.selectionCus) {
          for (let i in self.member.form.cus.table.data) {
            if (self.member.form.cus.table.data[i].id === select.id) {
              self.$refs.memberCuTable.toggleRowSelection(self.member.form.cus.table.data[i])
            }
          }
        }
      })
    },
    // 虚拟子网
    async handleVirtualSubnetRowClick (row) {
      let self = this
      self.virtualSubnetLoading = true
      self.virtual_subnet = row.id
      await self.getVirtualSubnetMember(row.id)
      await self.getVirtualSubnetFreqSegment(row.id)
      self.virtualSubnetLoading = false
    },
    handleVirtualSubnetCreate () {
      let self = this
      if (self.virtualSubnetTable.find(item => {
        return item.create
      })) {
        // 请先完成上一个创建操作
        self.$message.error(self.$t('message.virtualSubnet.info.error.err1'))
        return
      }
      self.virtualSubnetTable.push({
        name: '',
        create: true
      })
    },
    async handleVirtualSubnetDelete (index, row) {
      let self = this
      try {
        // 此操作将永久删除${row.name}虚拟子网，是否继续
        await self.$confirm(self.$t('message.virtualSubnet.info.prompt.prompt1', { name: row.name }),
          self.$t('message.common.label.prompt'), {
            confirmButtonText: self.$t('message.common.button.confirm'),
            cancelButtonText: self.$t('message.common.button.cancel'),
            type: 'warning'
          })
      } catch (e) {
        return
      }
      try {
        self.virtualSubnetLoading = true
        await self.$store.dispatch(`axios`, {
          method: 'delete',
          url: `/api/abs/resources/virtual_subnet/${row.id}/`
        })
        // 虚拟子网删除成功
        self.$message.success(self.$t('message.virtualSubnet.info.message.msg1'))
        if (self.virtual_subnet === row.id) self.virtual_subnet = ''
        self.virtualSubnetTable.splice(index, 1)
        self.member.table.data = []
        self.freqSegment.table.data = []
      } finally {
        self.virtualSubnetLoading = false
      }
    },
    async handleVirtualSubnetCreateSubmit (index, row) {
      let self = this
      let response = await self.$store.dispatch('axios', {
        method: 'post',
        url: `/api/abs/resources/virtual_subnet/`,
        data: {
          name: row.name
        }
      })
      self.virtualSubnetTable[index].create = false
      self.virtualSubnetTable[index].id = response.data.id
      self.virtualSubnetTable[index].name = response.data.name
      // 虚拟子网添加成功
      self.$message.success(self.$t('message.virtualSubnet.info.message.msg2'))
    },
    handleVirtualSubnetCreateCancel (index, row) {
      let self = this
      self.virtualSubnetTable.splice(index, 1)
    },
    // member
    async getVirtualSubnetMember (vsId) {
      let self = this
      let resposne = await self.$store.dispatch('axios', {
        method: 'get',
        url: `/api/abs/devices/virtual_cu/`,
        params: {
          virtual_subnet: vsId
        }
      })
      self.member.table.data = resposne.data
    },
    handleVirtualSubnetMemberCreate () {
      let self = this
      if (!self.virtual_subnet) {
        // 请先选择要添加用户的虚拟子网
        self.$message.error(self.$t('message.virtualSubnet.info.error.err2'))
        return
      }
      self.member.visible = true
    },
    async handleVirtualSubnetMemberDelete (row, index) {
      let self = this
      try {
        // 确定要将${row.device}终端从虚拟子网中删除吗？
        await self.$confirm(self.$t('message.virtualSubnet.info.prompt.prompt2', { device: row.device }),
          self.$t('message.common.label.prompt'), {
            confirmButtonText: self.$t('message.common.button.confirm'),
            cancelButtonText: self.$t('message.common.button.cancel'),
            type: 'warning'
          })
      } catch (e) {
        return
      }
      try {
        self.member.loading = true
        await self.$store.dispatch(`axios`, {
          method: 'delete',
          url: `/api/abs/devices/virtual_cu/${row.id}/`
        })
        // 终端删除成功
        self.$message.success(self.$t('message.virtualSubnet.info.message.msg3'))
        self.member.table.data.splice(index, 1)
      } finally {
        self.member.loading = false
      }
    },
    async handleVirtualSubnetMemberClear () {
      let self = this
      try {
        // 确定要将虚拟子网的终端清空吗
        await self.$confirm(self.$t('message.virtualSubnet.info.prompt.prompt3'),
          self.$t('message.common.label.prompt'), {
            confirmButtonText: self.$t('message.common.button.confirm'),
            cancelButtonText: self.$t('message.common.button.cancel'),
            type: 'warning'
          })
      } catch (e) {
        return
      }
      try {
        self.member.loading = true
        await self.$store.dispatch(`axios`, {
          method: 'post',
          url: `/api/abs/devices/virtual_cu/clear/`,
          data: {
            virtual_subnet: self.virtual_subnet
          }
        })
        // 终端清空成功
        self.$message.success(self.$t('message.virtualSubnet.info.message.msg4'))
        self.member.table.data = []
      } finally {
        self.member.loading = false
      }
    },
    async handleMemberCreateSubmit () {
      let self = this
      if (self.member.form.cus.table.data.length === 0) {
        // 请先选择要添加的终端
        self.$message.error(self.$t('message.virtualSubnet.info.error.err3'))
        return
      }
      try {
        self.member.loading = true
        let ids = self.member.form.cus.selectionCus.map(item => item.id)
        let response = await self.$store.dispatch(`axios`, {
          method: 'post',
          url: `/api/abs/devices/virtual_cu/batch/`,
          data: {
            virtual_subnet: self.virtual_subnet,
            cus: ids
          }
        })
        self.member.table.data = [
          ...self.member.table.data,
          ...response.data
        ]
        // 添加成员成功
        self.$message.success(self.$t('message.virtualSubnet.info.message.msg5'))
        self.member.visible = false
      } finally {
        self.member.loading = false
      }
    },
    handleMemberDialogClosed () {
      let self = this
      self.member.form.cus.selectionCus = []
    },
    // culist的分页
    async getCuList () {
      let self = this
      try {
        self.member.form.loading = true
        let response = await self.$store.dispatch(`axios`, {
          method: 'get',
          params: {
            // station__dept__center: false,

            ordering: self.cuSearchConfig.ordering || 'device',

            page: self.cuSearchConfig.page || 1,
            page_size: self.cuSearchConfig.pageSize || 10,

            search: self.cuSearchConfig.info,

            exclude_virtual_subnet: true
          },
          url: '/api/abs/devices/cus/'
        })
        self.member.form.cus.table.count = response.data.count
        self.member.form.cus.table.data = response.data.results
        self.setMemberCuTableSelect()
      } catch (e) {
        self.member.form.cus.table.data = []
      } finally {
        self.$nextTick(() => {
          self.member.form.loading = false
        })
      }
    },
    handleSearchCuSizeChange (size) {
      let self = this
      self.cuSearchConfig.pageSize = size
      self.cuSearchConfig.page = 1
      self.getCuList()
    },
    handleSearchCuPageChange (page) {
      let self = this
      self.cuSearchConfig.page = page
      self.getCuList()
    },
    handleRemoteTableSearch () {
      let self = this
      self.cuSearchConfig.page = 1
      self.getCuList()
    },
    // freqSegment
    async getVirtualSubnetFreqSegment (vsId) {
      let self = this
      let resposne = await self.$store.dispatch('axios', {
        method: 'get',
        url: `/api/abs/resources/virtual_subnet_freq_segment/`,
        params: {
          virtual_subnet: vsId
        }
      })
      self.freqSegment.table.data = resposne.data.map(item => {
        return {
          ...item,
          down_freq_begin_format: self.$service.miliFormat(item.down_freq_begin / 1000),
          down_freq_end_format: self.$service.miliFormat(item.down_freq_end / 1000)
        }
      })
    },
    handleVirtualSubnetFreqSegmentCreate () {
      let self = this
      if (!self.virtual_subnet) {
        // 请先选择要添加频率段的虚拟子网
        self.$message.error(self.$t('message.virtualSubnet.info.error.err4'))
        return
      }
      self.freqSegment.visible = true
    },
    async handleFreqSegmentDialogOpen () {
      let self = this
      try {
        self.freqSegment.loading = true
        let response = await self.$store.dispatch(`axios`, {
          method: 'get',
          url: '/api/abs/resources/satellite_tree/'
        })
        self.$store.commit(`setFreqSegmentTable`, [])
        self.freqSegment.form.down_freq_begin = ''
        self.freqSegment.form.down_freq_end = ''
        self.freqSegment.form.tree.data = response.data
      } finally {
        self.freqSegment.loading = false
      }
    },
    handleTreeNodeClick (data, node) {
      let self = this
      self.freqSegment.form.tree.currentNode = node
      self.freqSegment.form.down_freq_begin = ''
      self.freqSegment.form.down_freq_end = ''
      self.getFreqSegmentTableData()
    },
    async getFreqSegmentTableData () {
      let self = this
      if (self.freqSegment.form.tree.currentNode === null) {
        // 未选择卫星资源树节点
        self.$message.error(self.$t('message.satelliteResource.errors.err3'))
        return
      }
      try {
        self.freqSegment.form.table.loading = true
        await self.$store.dispatch(`getFreqSegmentTableData`, {
          node_type: self.freqSegment.form.tree.currentNode.data.node_type,
          id: self.freqSegment.form.tree.currentNode.data.id
        })
      } finally {
        self.freqSegment.form.table.loading = false
      }
    },
    filterNode (value, data) {
      if (!value) return true
      return data.name.toString().indexOf(value) !== -1
    },
    handleFreqSegmentRowClick (row) {
      let self = this
      self.freqSegment.form.freq_segment = row.id
      self.freqSegment.form.down_freq_begin = row.down_freq_begin
      self.freqSegment.form.down_freq_end = row.down_freq_end
    },
    async handleFreqSegmentCreateSubmit () {
      let self = this
      let response = await self.$store.dispatch('axios', {
        method: 'post',
        url: `/api/abs/resources/virtual_subnet_freq_segment/`,
        data: {
          virtual_subnet: self.virtual_subnet,
          freq_segment: self.freqSegment.form.freq_segment,
          down_freq_begin: self.freqSegment.form.down_freq_begin * 1000,
          down_freq_end: self.freqSegment.form.down_freq_end * 1000
        }
      })
      self.freqSegment.table.data.push({
        ...response.data,
        down_freq_begin: response.data.down_freq_begin / 1000,
        down_freq_end: response.data.down_freq_end / 1000,
        down_freq_begin_format: self.$service.miliFormat(response.data.down_freq_begin / 1000),
        down_freq_end_format: self.$service.miliFormat(response.data.down_freq_end / 1000)
      })
      // 添加频率段成功
      self.$message.success(self.$t('message.virtualSubnet.info.message.msg6'))
      self.freqSegment.visible = false
    },
    async handleVirtualSubnetFreqSegmentDelete (row, index) {
      let self = this
      try {
        // 确定要将频率段从虚拟子网中删除吗
        await self.$confirm(self.$t('message.virtualSubnet.info.prompt.prompt4'),
          self.$t('message.common.label.prompt'), {
            confirmButtonText: self.$t('message.common.button.confirm'),
            cancelButtonText: self.$t('message.common.button.cancel'),
            type: 'warning'
          })
      } catch (e) {
        return
      }
      try {
        self.freqSegment.loading = true
        await self.$store.dispatch(`axios`, {
          method: 'delete',
          url: `/api/abs/resources/virtual_subnet_freq_segment/${row.id}/`
        })
        // 频率段删除成功
        self.$message.success(self.$t('message.virtualSubnet.info.message.msg7'))
        self.freqSegment.table.data.splice(index, 1)
      } finally {
        self.freqSegment.loading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .member-dialog-div-content{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
    .member-left{
      height: 100%;
      text-align: left;
      flex: 0 0 200px;
      display: inline-block;
      overflow-y: auto;
      .member-left-header{
        margin-top: 55px;
      }
      .member-left-list{}
    }
    .member-right{
      padding-left: 10px;
      text-align: left;
      flex: 1 1 600px;
      .member-dialog-search-div{
        margin: 10px 0;
        text-align: left;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
  .my-test{
    overflow-y: scroll;
  }
</style>
